function findScrollParents($el) {
  const $scrollParents = [];
  let $parent = $el.parentNode;

  while ($parent && $parent.nodeName !== "BODY" && $parent.nodeType === document.ELEMENT_NODE) {
    if (isScrollElment($parent)) $scrollParents.push($parent);
    $parent = $parent.parentNode;
  }
  $scrollParents.push(window);

  return $scrollParents;
}

function isScrollElment($el) {
  // Firefox wants us to check `-x` and `-y` variations as well
  const { overflow, overflowX, overflowY } = getComputedStyle($el);
  return /(auto|scroll|overlay)/.test(overflow + overflowY + overflowX);
}

export function setupResizeAndScrollEventListeners($el, listener) {
  const $scrollParents = findScrollParents($el);

  window.addEventListener("resize", listener, { passive: true });
  $scrollParents.forEach((scrollParent) => {
    scrollParent.addEventListener("scroll", listener, { passive: true });
  });

  return function removeEventListeners() {
    window.removeEventListener("resize", listener, { passive: true });
    $scrollParents.forEach(($scrollParent) => {
      $scrollParent.removeEventListener("scroll", listener, { passive: true });
    });
  };
}
